<script setup lang="ts">
import { useCssVar } from '@vueuse/core';
import Tabbar from './Tabbar/index.vue';
import Toolbar from './Toolbar/index.vue';
import useSettingsStore from '@/store/modules/settings';

defineOptions({
  name: 'Topbar',
});

const settingsStore = useSettingsStore();

/**
 * 计算属性：是否开启工具栏
 *
 * @return {boolean}
 */
const enableToolbar = computed(() => {
  return !(
    (
      settingsStore.settings.menu.menuMode === 'head'
      && !settingsStore.settings.menu.enableSubMenuCollapseButton
      && !settingsStore.settings.favorites.enable
      && (
        !settingsStore.settings.breadcrumb.enable
        || settingsStore.settings.app.routeBaseOn === 'filesystem'
      )
    ) || (
      settingsStore.settings.menu.menuMode === 'only-head'
      && !settingsStore.settings.favorites.enable
      && (
        !settingsStore.settings.breadcrumb.enable
        || settingsStore.settings.app.routeBaseOn === 'filesystem'
      )
    )
  );
});

const scrollTop = ref(0);
const scrollOnHide = ref(false);
const globalTabbarHeight = useCssVar('--g-tabbar-height', document.documentElement || document.body);
const globalToolBarHeight = useCssVar('--g-toolbar-height', document.documentElement || document.body);

const topbarHeight = computed(() => {
  const tabbarHeight = settingsStore.settings.tabbar.enable
    ? Number.parseInt(globalTabbarHeight.value)
    : 0;
  const toolbarHeight = enableToolbar.value
    ? Number.parseInt(globalToolBarHeight.value)
    : 0;
  return tabbarHeight + toolbarHeight;
});
onMounted(() => {
  window.addEventListener('scroll', onScroll);
});
onUnmounted(() => {
  window.removeEventListener('scroll', onScroll);
});
function onScroll() {
  scrollTop.value = (document.documentElement || document.body).scrollTop;
}
watch(scrollTop, (val, oldVal) => {
  scrollOnHide.value = settingsStore.settings.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight.value;
});
</script>

<template>
  <div
    class="topbar-container"
    :class="{
      'has-tabbar': settingsStore.settings.tabbar.enable,
      'has-toolbar': enableToolbar,
      [`topbar-${settingsStore.settings.topbar.mode}`]: true,
      'shadow': !settingsStore.settings.topbar.switchTabbarAndToolbar && scrollTop,
      'hide': scrollOnHide,
      'switch-tabbar-toolbar': settingsStore.settings.topbar.switchTabbarAndToolbar,
    }"
    data-fixed-calc-width
  >
    <Tabbar v-if="settingsStore.settings.tabbar.enable" />
    <Toolbar v-if="enableToolbar" />
  </div>
</template>

<style lang="scss" scoped>
.topbar-container {
  position: absolute;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 0 var(--g-border-color);
  transition: width 0.3s, top 0.3s, transform 0.3s, box-shadow 0.3s;

  &.topbar-fixed,
  &.topbar-sticky {
    position: fixed;

    &.shadow {
      box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
    }
  }

  &.topbar-sticky.hide {
    top: calc((var(--g-tabbar-height) + var(--g-toolbar-height)) * -1) !important;
  }

  &.switch-tabbar-toolbar {
    flex-direction: column-reverse;
  }
}
</style>
